import React, { useEffect, useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useAuth } from '../../hooks/useAuth';

// 路由常量
const AUTH_ROUTES = {
  LOGIN: '/auth/login',
};

export const VerifyEmail: React.FC = () => {
  const [verificationStatus, setVerificationStatus] = useState<'verifying' | 'success' | 'already_verified' | 'error'>('verifying');
  const [error, setError] = useState<string | null>(null);
  const { verifyEmail } = useAuth();
  const location = useLocation();

  useEffect(() => {
    const verifyToken = async () => {
      try {
        // 从URL中获取token参数
        const searchParams = new URLSearchParams(location.search);
        const token = searchParams.get('token');

        if (!token) {
          setError('验证令牌不存在');
          setVerificationStatus('error');
          return;
        }

        const result = await verifyEmail(token);
        if (result.status === 'verified') {
          setVerificationStatus('success');
        } else if (result.status === 'already_verified') {
          setVerificationStatus('already_verified');
        } else {
          setError(result.message || '验证失败');
          setVerificationStatus('error');
        }
      } catch (err) {
        setError(err instanceof Error ? err.message : '验证过程中发生错误');
        setVerificationStatus('error');
      }
    };

    verifyToken();
  }, [location.search, verifyEmail]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="max-w-md w-full space-y-8 p-10 bg-white rounded-xl shadow-lg">
        <div className="text-center">
          <h1 className="text-3xl font-extrabold text-gray-900">邮箱验证</h1>
          
          {verificationStatus === 'verifying' && (
            <div className="mt-4">
              <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto"></div>
              <p className="mt-4 text-gray-600">正在验证您的邮箱...</p>
            </div>
          )}

          {verificationStatus === 'success' && (
            <div className="mt-4">
              <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
                <svg className="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                </svg>
              </div>
              <p className="mt-4 text-gray-600">邮箱验证成功！</p>
              <Link
                to={AUTH_ROUTES.LOGIN}
                className="mt-4 inline-block px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
              >
                返回登录
              </Link>
            </div>
          )}

          {verificationStatus === 'already_verified' && (
            <div className="mt-4">
              <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100">
                <svg className="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <p className="mt-4 text-gray-600">邮箱已经验证过了</p>
              <Link
                to={AUTH_ROUTES.LOGIN}
                className="mt-4 inline-block px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
              >
                返回登录
              </Link>
            </div>
          )}

          {verificationStatus === 'error' && (
            <div className="mt-4">
              <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                <svg className="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </div>
              <p className="mt-4 text-red-600">{error || '验证失败'}</p>
              <Link
                to={AUTH_ROUTES.LOGIN}
                className="mt-4 inline-block px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
              >
                返回登录
              </Link>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default VerifyEmail; 